﻿@page "/videoPlayers"
@attribute [TabItemOption(Text = "视频播放器")]

<a href="https://www.nuget.org/packages/BootstrapBlazor.VideoPlayer#readme-body-tab"><h4>视频播放器 VideoPlayer</h4></a>
<hr />
<a href="https://github.com/densen2014/Densen.Extensions/blob/master/Demo/DemoShared/Pages/VideoPlayers.razor"><h5>页面源码</h5></a>

<div class="row g-3">
    <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
        <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ChangeURL" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
        <BootstrapInput @bind-Value="@Url" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
        <BootstrapInput @bind-Value="@MineType" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
        <Button Color="Color.Primary" OnClick="Apply">加载</Button>
    </div>
</div>

<VideoPlayer @ref="video1" MineType="@MineType" Url="@Url" Width="400" Height="300" Poster="//vjs.zencdn.net/v/oceans.png" />

@code{
    private string MineType = "application/x-mpegURL";
    private string Url = "https://rtvelivestream.akamaized.net/rtvesec/la1/la1_main.m3u8";

    VideoPlayer? video1;

    List<string> VideoList = new List<string>
{
        "https://rtvelivestream.akamaized.net/rtvesec/la1/la1_main.m3u8",
        "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8",
        "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
        "https://res.cloudinary.com/dannykeane/video/upload/sp_full_hd/q_80:qmax_90,ac_none/v1/dk-memoji-dark.m3u8",
        "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8",
        "https://moctobpltc-i.akamaihd.net/hls/live/571329/eight/playlist.m3u8",
        "https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8",
        "https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8",
        "https://diceyk6a7voy4.cloudfront.net/e78752a1-2e83-43fa-85ae-3d508be29366/hls/fitfest-sample-1_Ott_Hls_Ts_Avc_Aac_16x9_1280x720p_30Hz_6.0Mbps_qvbr.m3u8",
    };

    List<SelectedItem> Items = new List<SelectedItem>();

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();
        for (int i = 0; i < VideoList.Count; i++)
        {
            Items.Add(new SelectedItem { Text = $"TestVideo{i}", Value = VideoList[i] });
        }
        Items.Add(new SelectedItem { Text = "Mp4", Value = "//vjs.zencdn.net/v/oceans.mp4" });
        Items.Add(new SelectedItem { Text = "Mp4Local", Value = "https://blazor.app1.es/samples/ColorFlow2.mp4" });
#if DEBUG
        Items.Add(new SelectedItem { Text = "playlist.m3u8", Value = "https://localhost:5011/stream/cache/playlist.m3u8" });
        Items.Add(new SelectedItem { Text = "live.m3u8", Value = "https://localhost:5011/stream/cache/live.m3u8" });
#else
    Items.Add(new SelectedItem { Text = "playlist.m3u8", Value = "https://blazor.app1.es/stream/cache/playlist.m3u8" });
    Items.Add(new SelectedItem { Text = "live.m3u8", Value = "https://blazor.app1.es/stream/cache/live.m3u8" });
#endif
        //Items.Add(new SelectedItem { Text = "rtsp", Value = "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4" });
        //Items.Add(new SelectedItem { Text = "rtmp", Value = "rtmp://ns8.indexforce.com/home/mystream" });
    }

    private async Task ChangeURL(SelectedItem e)
    {
        Url = e.Value;
        MineType = (e.Value.StartsWith("rtsp://") || e.Value.StartsWith("rtmp://")) ? "rtmp/flv" :
            e.Value.EndsWith("mp4") ? "video/mp4" :
            e.Text == "Youtube" ? "video/youtube" :
            "application/x-mpegURL";
        StateHasChanged();
        await Apply();
    }

    private async Task Apply()
    {
        await video1.SetPoster("//vjs.zencdn.net/v/oceans.png");
        await video1.Reload(Url, MineType);
    }

}
